@charset "utf-8";
/* CSS Document */


/******主体内容******/
.shop-container{ position: absolute; left: 0; top: 1.8rem; right: 0; padding-bottom: 4.2rem; transition:all 0.3s linear 0s; -webkit-transition:all 0.3s linear 0s; -o-transition:all 0.3s linear 0s;}

/**********购物车**********/
/**************************/
/******购物车列表******/
/*------主体------*/
.shopcart{ width:auto; background:#fff; margin:.3rem; border-radius:.3rem; overflow: hidden;}

/*------选择的圆框------*/
.select-item{ display: block; position: absolute; left: .3rem; top: 1.5rem;}

.select-item input[type=checkbox]{ width: .7rem; height: .7rem; border: #ddd .08rem solid; border-radius: 50%; -webkit-appearance: none; appearance: none;}
.select-item input[type=checkbox]:checked{ background: url("../images/icon_check_white.svg") no-repeat center; background-size: .5rem auto; background-color:  #ea333f; border: none;}

/*------店铺名字------*/
.shopcart-store{ width: 100%; background: #fff; border-bottom:none; overflow: hidden; padding: .35rem .5rem .35rem 1.5rem; position: relative;}
.shopcart-store a{ line-height: 1rem; font-size: .56rem; color: #111; overflow: hidden; display: block; padding: 0 0 0 1.3rem; position: relative;}
.shopcart-store a:after{ width: 1rem; height: 1rem; content: ''; background: url("../images/icon_store.svg") no-repeat center; background-size: .96rem; position: absolute; left: 0; top: 0;}

.shopcart-store .select-item{ top: .6rem;}

/*------商品信息------*/
.shopcart-list{ width: auto; min-height: 4rem; border-bottom: #f4f4f4 .05rem solid; overflow: hidden; padding: .5rem .5rem .5rem 5.4rem; position: relative;}
.shopcart-list img{ width: 3rem; height: 3rem; position:absolute; left: 1.8rem; top: .4rem;}

.shopcart-info{ width:auto;}
.shopcart-info a{ max-height: 1.32rem; line-height: .66rem; font-size: .52rem; color: #333; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.shopcart-info p{ font-size: .6rem; color: #f80; margin-top: .3rem; display: block; float: left;}

/*----选择属性----*/
.shopcart-sort{ width: 100%; overflow: hidden; margin-top: .3rem;}
.shopcart-sort span{ line-height: .8rem; font-size: .45rem; color: #999; background: #eaeaea; border-radius: .2rem; display: block; padding: 0 1rem 0 .3rem; float: left; position: relative;}
.shopcart-sort span:after{ width: .25rem; height: .25rem; content: ''; border-top: #ccc .05rem solid; border-right: #ccc .05rem solid; transform:rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); position: absolute; right: .4rem; top: .15rem;}

/*----选择数量----*/
.choose-num{ padding: .3rem 0 0 0; display: block; float: right;}
.choose-num a{ width: .9rem; height: .9rem; background-color: #fff; border: #e4e4e4 .05rem solid; display: block; float: left;}
.choose-num a:first-child{ border-radius: .2rem 0 0 .2rem; border-right: none;}
.choose-num a:last-child{ border-radius: 0 .2rem .2rem 0; border-left: none;}

.choose-num i{ width: .9rem; height: .9rem; background-repeat: no-repeat; background-position: center; background-size: .4rem auto; display: block;}

.choose-num input{ width: 1.5rem; height: .9rem; font-size: .56rem; color: #555; text-align: center; border: #e4e4e4 .05rem solid; float: left; padding: 0 .2rem;}

.choose-num i.minus-num{ background-image: url("../images/icon_minus_dark.svg");}
.choose-num i.plus-num{ background-image: url("../images/icon_plus_dark.svg");}

/*----删除----*/
.shopcart-delect{ font-size: .56rem; color: #aaa; float: right; clear: both; margin-top: .3rem;}


/******购物车操作栏******/
/*------主体------*/
.shopcart-toolbar{ height: 2rem; background: #fff; border-top:#eee .05rem solid; position: fixed; bottom: 2rem; left: 0; right: 0; z-index: 9999;}

/*------全选------*/
.select-all{ float: left;}
.select-all p{ line-height: 2rem; font-size: .56rem; color: #555; display: block; float: left; margin-left: .3rem;}

.select-all input[type=checkbox]{ width: .75rem; height: .75rem; border: #ccc .06rem solid; border-radius: 50%; -webkit-appearance: none; appearance: none; float: left; margin-left: .4rem; margin-top: .65rem;}
.select-all input[type=checkbox]:checked{ background: url(../images/icon_check_white.svg) no-repeat center; background-size: .5rem auto; background-color:  #ea333f; border: none;}

/*------总价------*/
.shopcart-sumbit{ overflow: hidden; float: right;}

.shopcart-summary{ line-height: 2rem; overflow: hidden; float: left; padding: 0 .4rem 0 0;}

.shopcart-summary b{ font-weight: normal; font-size: .52rem; color: #333;}
.shopcart-summary span{ font-size: .6rem; color: #ff0036;}

/*------提交------*/
.shopcart-submit-btn{ height: 1.4rem; line-height: 1.4rem; font-size: .56rem; color: #fff; border-radius:.8rem; background: linear-gradient(to right, #ff0036, #ff0036); background: -webkit-linear-gradient(left, #ff0036, #ff0036); overflow: hidden; display: block; padding: 0 .6rem; float: left; margin-top:.25rem; margin-right:.3rem;}
.shopcart-submit-btn span{ font-size: .52rem;}


/*------选择参数------*/
.selector-main{ width: 100%; height: 13rem; background: #fff; padding: .5rem 0; overflow-y: auto;}

.selector-package{ width:100%; overflow:hidden; padding:.5rem .5rem 0 .5rem;}
.selector-package h3{ font-size:.52rem; font-weight:normal; color:#333;}

.selector-package .selector-package-list{ width:100%; border-bottom: #eee .05rem solid; overflow: hidden; padding: .3rem 0 .4rem 0;}
.selector-package .selector-package-list span{ line-height: 1.1rem; font-size: .5rem; color: #555; white-space: nowrap; border: #ddd .05rem solid; border-radius: .2rem; overflow: hidden; padding: 0 .5rem; display: block; float: left; margin-top: .2rem; margin-right: .4rem;}

.selector-package .selector-package-list span.selected{ color: #ff0036; background: #fff9f9; border: #ff0036 .05rem solid;}
.selector-package .selector-package-list span.disabled{ color: #d4d4d4; background: #f4f4f4; border: #e1e1e1 .05rem dashed;}



/**********商城部分**********/
/**************************/
/******产品列表：一行两列******/
/*------列表主体------*/
.goods{ width:auto; background:#f4f4f4; overflow:hidden; margin:.3rem; margin-top: .15rem;}
.goods-box{ width:50%; overflow:hidden; float:left;}

.goods-box .goods-content{ width:auto; background:#fff; border-radius:.3rem; overflow:hidden; display:block; padding:.1rem; margin: .1rem .1rem .1rem 0;}
.goods-box:nth-child(2n) .goods-content{ margin: .1rem 0 .1rem .1rem;}

.goods-box .goods-content a{ width: 100%; display: block;}

/*------产品图片------*/
.goods-img{ width: 100%; height: 0; padding-bottom: 100%; position: relative; margin: 0 auto;}
.goods-img img{ width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}

/*------产品标题------*/
.goods-name{ overflow: hidden; position: relative; padding: .5rem .3rem .3rem .3rem;}
.goods-name h3{ width: 100%; line-height: .8rem; font-size: .52rem; font-weight: normal; color: #333; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.goods-name .goods-tag{ font-size: .45rem; color: #ff5000; background: #ffeeee; border-radius: .1rem; overflow: hidden; padding: 0 .3rem; display: block; position: absolute; left: .3rem; bottom: 0;}

/*------产品价格------*/
.goods-price{ width: auto; overflow: hidden; padding: .4rem .3rem 0 .3rem;}

.goods-price .goods-price-text{ line-height: 1.2rem; height: 1.2rem; color: #ff0036; overflow: hidden; float: left;}
.goods-price .goods-price-text i{ font-style: normal; font-size: .58rem;}
.goods-price .goods-price-text b{ font-weight: normal; font-size: .72rem;}

.goods-price .goods-sale{ line-height: 1.2rem; height: 1.2rem; font-size: .48rem; color: #aaa; overflow: hidden; float: left; margin-left: .2rem;}

/*------产品买家------*/
.goods-buyer{ height: 1.2rem; float: right; position: relative;}
.goods-buyer .buyer-box{ width: 1rem; height: 1rem; border: #fff .05rem solid; border-radius: 50%; overflow: hidden; position: absolute; top: 0;}
.goods-buyer .buyer-box:last-child{ right: 0; z-index: 1;}
.goods-buyer .buyer-box:first-child{ right: .54rem; z-index: 2;}
.goods-buyer .buyer-box img{ width: .9rem; height: .9rem; border-radius: 50%; object-fit: cover;}


/**********产品分类部分**********/
/**************************/
/******主体******/
.classify-content{ width:100%; background:#fff; overflow-x:hidden; overflow-y:auto; padding: 1.8rem 0 0 3.6rem;}


/******左侧的一级分类******/
/*------主体------*/
.classify-left{ width: 3.6rem; height: 100%; background: #f6f6f6; overflow-x: hidden; padding-top: 1.8rem; overflow-y: auto; -webkit-overflow-scrolling: touch; position: fixed; left: 0; top: 0; z-index:1;}
.classify-left ul{ background:#fff;}
.classify-left li{ width:100%; height:1.8rem; line-height:1.8rem; font-size:.52rem; color:#555; text-align:center; overflow:visible; position:relative; z-index:3;}
.classify-left li span{ width:100%; height:100%; color:#555; display:block; position:relative;}

/*------选中状态------*/
.classify-left li.active span{ color: #ff0036; background: #f5f5f5; font-weight:bold;}
.classify-left li.active:after{ width:.16rem; height:60%; content:''; background: #ff0036; position:absolute; left:0; top:20%; z-index:4;}


/******二级******/
.classify-right{background:none; overflow-x:hidden; overflow-y: auto; padding:0 .4rem; position: fixed; left: 3.6rem; right: 0; top:  1.8rem; bottom: 0;}

.classify-right .classify-item{ width: 100%; overflow: hidden; padding: .5rem 0 0 0;}
.classify-right .classify-title{ width: 100%; line-height: 1.2rem; padding-left:.2rem; overflow: hidden; padding-bottom: .2rem;}
.classify-right .classify-title h3{ font-size: .56rem; font-weight:bold; color: #333; float: left;}
.classify-right .classify-title a{ font-size: .52rem; color: #999; display: block; float: right;}

.classify-right .classify-item ul{ background:#fff; border-radius:.3rem; overflow:hidden; padding:.5rem;}

.classify-right .classify-item li{ width:24.49%; float:left; margin-right:13.26%; position:relative;}
.classify-right .classify-item li:nth-child(3n){ margin-right:0;}

.classify-right .classify-item li a{ height:100%; text-align:center; display:block; position:relative;}
.classify-right .classify-item li p{ width:100%; height:1.2rem; line-height:1.2rem; font-size:.52rem; color:#666; overflow:hidden;}

.classify-img{ width:100%; position:relative; padding-top:100%;}
.classify-img img{ width:100%; position:absolute; left:0; top:0;}


/******滚动标题样式******/
/*------主体------*/
.shoporder-scroll-title{ width: 100%; height: 1.68rem; background: #f3f3f3; overflow: hidden; padding: 0 .3rem; position: relative;}
.shoporder-scroll-title:after{ width: 1rem; height: 1.68rem; content: ''; background: -webkit-linear-gradient(right,#fff,hsla(0,0%,100%,.4)); background: linear-gradient(270deg,#fff 0,hsla(0,0%,100%,.4)); position: absolute; right: 0; top: 0; z-index: 1001;}

.shoporder-scroll-title-fixed{ box-shadow: 0 .06rem .3rem rgba(0,0,0,.1); position: fixed; left: 0; top: 1.8rem; z-index: 99999;}

/*------列表------*/
.shoporder-scroll-title ul{ width: 100%; height: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-right: 1rem;}
.shoporder-scroll-title li{ height: 1.68rem; line-height: 1.68rem; font-size: .56rem; color: #555; display: inline-block; padding: 0 .36rem;}

.shoporder-scroll-title li span{ height: 1.68rem; color: #666; display: block; position: relative;}
.shoporder-scroll-title li span.active{ color: #FF0036;}
.shoporder-scroll-title li span.active:after{ width: 100%; height: .1rem; content: ''; background: #FF0036; position: absolute; left: 0; bottom: 0; z-index: 1000;}



/******订单列表******/
/*------主体------*/
.shop-order{ width:auto; background:#fff; overflow: hidden;}

/*------标题------*/
.shop-order .shop-order-title{ width: auto; height: 1.6rem; line-height: 1.6rem; color: #555; background: #fff; overflow: hidden; padding: 0 .5rem; position: relative;}
.shop-order .shop-order-title .order-store{ font-size: .56rem; color: #111; overflow: hidden; display: block; padding: 0 0 0 1.1rem; position: relative;}
.shop-order .shop-order-title .order-store:before{ width: 1rem; height: 1rem; content: ''; background: url(../images/icon_store.svg) no-repeat center; background-size: .7rem; position: absolute; left: 0; top: .3rem;}

.shop-order .shop-order-title .order-num{ font-size: .56rem; color: #111; overflow: hidden; display: block;}
.shop-order .shop-order-title .order-status{ font-size: .52rem; color: #46a9fd; display: block;}

/*------订单产品------*/
.shop-order .shop-order-product{ width: auto; min-height: 3.8rem; border-bottom: #f4f4f4 .05rem solid; overflow: hidden; padding: .4rem 3.4rem .4rem 3.6rem; position: relative;}

.shop-order .shop-order-product img{ width: 2.6rem; height: 2.6rem; position:absolute; left: .5rem; top: .4rem;}
.shop-order .shop-order-product a, .shop-order .shop-order-product h1{ font-size: .52rem; color: #333;}

.shop-order .shop-order-product .order-price{ text-align: right; position: absolute; right: .5rem; top: .4rem;}
.shop-order .shop-order-product .order-price p{ font-size: .52rem; color: #777; margin-top: .1rem;}
.shop-order .shop-order-product .order-price p.order-product-price{ font-size: .56rem; color: #f80;}

/*------订单产品属性------*/
.shop-order .order-sort{ width: 100%; overflow: hidden; margin-top: .3rem;}
.shop-order .order-sort span{ line-height: .8rem; font-size: .45rem; color: #999; background: #eaeaea; border-radius: .2rem; display: block; padding: 0 .3rem; float: left; position: relative;}

/*------订单总价------*/
.shop-order-summary{ width: 100%; color: #111; text-align: right; background: #fff; border-top:none; padding: .3rem .5rem; position: relative;}
.shop-order-summary:after{ width: .4rem; height: .4rem; content: ''; border-top: none; border-right: none; background: #fff; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; right: 1rem; top: -.2rem;}

.shop-order-summary span{ font-size: .52rem; margin: 0 .1rem;}
.shop-order-summary b{ font-size: .66rem; font-weight: normal; color: #333;}
.shop-order-summary span{ font-size: .48rem; margin: 0 .1rem;}

/*------订单操作------*/
.shop-order-toolbar{ width: auto; background: #fff; overflow: hidden; padding: .3rem .4rem;}
.shop-order-toolbar a{ height: 1.1rem; line-height: 1.02rem; font-size: .52rem; color: #555; border: #d4d4d4 .05rem solid; border-radius: .5rem; padding: 0 .5rem; display: block; float: right; margin-left: .3rem;}
.shop-order-toolbar a.active{ color: #ff0036; border:#ff0036 .05rem solid;}



/**********产品订单**********/
/**************************/
/******订单列表******/
/*------状态栏------*/
.shop-order .shop-order-title{ width: auto; height: 1.7rem; line-height: 1.7rem; color: #555; background: #fff; overflow: hidden; padding: 0 .5rem; position: relative;}

.shop-order .shop-order-title .order-shop-img{ width: .9rem; height: .9rem; border-radius: 50%; margin-top: .4rem; margin-right: .5rem;}
.shop-order .shop-order-title .order-shop{ font-size: .56rem; color: #555; background: url("../images/icon_arrow_small.svg") no-repeat center right; background-size: .26rem auto; overflow: hidden; display: block; padding: 0 .6rem 0 0;}

.shop-order .shop-order-title .order-status{ font-size: .52rem; color: #ff0036; display: block;}

/*------订单产品------*/
.shop-order .shop-order-info{ width: 100%; overflow: hidden; display: block;}
.shop-order .shop-order-info .order-item{min-height: 4.1rem; background:none; overflow: hidden; padding: .5rem 3rem .5rem 4.1rem; position: relative;}

.shop-order .shop-order-info .order-item-pic{ width: 3.1rem; height: 3.1rem; position: absolute; left: .5rem; top: .5rem;}
.shop-order .shop-order-info .order-item-pic img{ width: 3.1rem; height: 3.1rem; object-fit: cover;}

.shop-order .shop-order-info .order-item h1{ height: 1.6rem; line-height: .8rem; font-weight: normal; font-size: .56rem; color: #333; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.shop-order .shop-order-info .order-item p{ font-size: .5rem; color: #aaa; margin-top: .3rem;}

/*------订单价格------*/
.shop-order .shop-order-info .order-price{ position:absolute; right:.5rem; top:.6rem;}

.shop-order .shop-order-info .order-price h3, .order .order-info .order-price span{ text-align:right; display:block;}
.shop-order .shop-order-info .order-price h3{ font-size:.56rem; font-weight:normal; color:#333;}
.shop-order .shop-order-info .order-price span{ font-size:.5rem; color:#aaa; margin-top:.2rem;}



/******订单详情******/
/*------订单状态------*/
.shop-order-status{ width: 100%; background: linear-gradient(90deg, #ff0036, #ff0036); background: -webkit-linear-gradient(left, #ff0036, #ff0036); overflow: hidden; padding: 1rem .5rem 1rem 1.5rem;}
.shop-order-status h1{ font-size: .8rem;  color: #fff; float: left;}

.shop-order-status a{ font-size: .52rem; color: #fff; border: rgba(255, 255, 255, .6) .05rem solid; border-radius: .2rem; padding: .16rem .5rem; display: block; float: right;}


/*------订单固定底部操作栏------*/
.order-details-toolbar{ width: 100%; height: 2rem; background: #fff; border-top: #eee .05rem solid; position: fixed; left: 0; bottom: 0; right: 0; z-index: 99;}

.order-details-button{ overflow: hidden; padding: .3rem .5rem; float: right;}
.order-details-button a{ line-height: 1.2rem; font-size: .56rem; color: #555; border: #e4e4e4 .05rem solid; border-radius: .8rem; display: block; float: left; padding: 0 .3rem; margin-left: .2rem;}
.order-details-button a.active{ color: #ff0036; border:#ff0036 .05rem solid; background:none;}



/******我的收藏******/
.collection{ width:100%; border-bottom:#eee 1px solid; background:#fff; overflow:hidden; position:relative;}
.collection a{ width:100%; display:block; overflow:hidden; padding: .4rem;}
.collection img{ width:4rem; height:4rem;}

.collection .collection-info{ width:10.2rem; overflow:hidden; padding:.3rem .5rem 0 .7rem;}
.collection .collection-info h3{ height:1.6rem; line-height:.8rem; font-weight:normal; font-size:.56rem; color:#333; -webkit-line-clamp:2; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical;}
.collection .collection-info p{ font-size:.64rem; color:#e02e24; margin-top:.5rem;}
.collection-delete{ width:1.2rem; height:1.2rem; border-radius:50%; border:#E8E8E8 1px solid; background:url(../images/delect-icon.png) no-repeat center; background-size:.6rem; display:block; position:absolute; z-index:9; right:.5rem; bottom:.3rem;}


.goods-delete{width: 1rem; height: 1rem; border-radius: 50%; border: #d8d8d8 1px solid; background: url(../images/delect-icon.png) no-repeat center; background-size: .6rem; display: block;}


/******底部固定操作栏******/
/*------主体------*/
.goods-bar{ width:100%; height:2rem; background:#fff; border-top:#eaeaea 1px solid; position:fixed; left:0; bottom:0; z-index:999; padding:0 0 0 6.6rem;}

/*------左侧小按钮------*/
.goods-bar .goods-operate{ height:2rem; position:absolute; left:0; top:0;}
.goods-bar .goods-operate .goods-operate-btn{ width:2.2rem; height:2rem; float:left; border-top:none;}

.goods-bar .goods-operate .goods-operate-btn a{ width:100%; height:100%; display:block; position:relative;}

.goods-bar .goods-operate .goods-operate-btn i, .goods-bar .goods-operate-btn span{ display:block;}
.goods-bar .goods-operate .goods-operate-btn i{ width:1rem; height:1rem; background-position:center; background-repeat:no-repeat; background-size:.7rem auto; margin:0 auto; margin-top:.1rem;}
.goods-bar .goods-operate .goods-operate-btn span{ font-size:.52rem; color:#999; text-align:center; margin-top:0rem; margin-bottom:.1rem;}

.goods-bar .goods-operate .goods-operate-btn em{ width:.8rem; height:.8rem; line-height: .8rem; font-size: .4rem; text-align: center; color: #fff; border-radius:50%; background:#f60; display:block; position:absolute; right:0; top:-.26rem;}

/*------按钮图标------*/
.goods-bar .goods-operate .operate-btn-1 i{ background-image: url(../images/shop/icon_store.svg);}

.goods-bar .goods-operate .operate-btn-2 i{ background-image: url(../images/shop/icon_collect.svg); background-size: .7rem auto;}
.goods-bar .goods-operate .operate-btn-2 .active i{ background-image: url(../images/shop/icon_collect_active.svg);}

.goods-bar .goods-operate .operate-btn-3 i{ background-image: url(../images/shop/icon_contact.svg);}

/*------右侧购买按钮------*/
.goods-bar .buy-btn{ width: 96%; height: 2.2rem; padding-top:.3rem; overflow: hidden; margin:0rem auto;}
.goods-bar .buy-btn a, .goods-bar .buy-btn div{ height: 100%; color: #fff; text-align: center; display: block; float: left;}
.goods-bar .buy-btn .buy-btn-1{ width: 48%; height:1.5rem; line-height:1.25rem; border-radius:.8rem 0rem 0rem .8rem; background: #ff9500;}
.goods-bar .buy-btn .buy-btn-2{ width: 48%; height:1.5rem; line-height:1.25rem; border-radius:0rem .8rem .8rem 0rem; background: #ff0036;}

.goods-bar .buy-btn h3{ font-size:.64rem; display:block; margin-top: .24rem;}
.goods-bar .buy-btn span{ font-size:.52rem; display:block; margin-top: .1rem;}

.goods-info-price span.goods-original-price{ margin-left:0rem;}
